<template>
    <div class="baseInfo">
      <vxe-table
        border
        stripe
        ref="tableRef"
        size="small"
        header-align="center"
        :row-config="rowConfig"
        :column-config="columnConfig"
        :data="tableData"
      >
        <vxe-column type="seq" width="70" align="center" fixed="left"></vxe-column>
        <vxe-column field="orderCode" show-overflow="title" align="center" title="订单编号"></vxe-column>
        <vxe-column field="platformOrderCode" show-overflow="title" align="center" title="平台单号"></vxe-column>
        <vxe-column field="productCode" show-overflow="title" align="center" title="商品编码"></vxe-column>
        <vxe-column field="productName" show-overflow="title" align="center" title="商品名称"></vxe-column>
        <vxe-column field="warehouseName" show-overflow="title" align="center" title="仓库"></vxe-column>
        <vxe-column field="specification" show-overflow="title" align="center" title="规格信息"></vxe-column>
        <vxe-column field="platformProductCode" show-overflow="title" align="center" title="平台商品编码"></vxe-column>
        <vxe-column field="platformProductName" show-overflow="title" align="center" title="平台商品名称"></vxe-column>
        <vxe-column field="platformProductSpecification" show-overflow="title" align="center" title="平台规格信息"></vxe-column>
        <vxe-column field="quantity" show-overflow="title" align="center" title="数量"></vxe-column>
        <vxe-column field="expressFee" show-overflow="title" align="center" title="物流费用"></vxe-column>
        <vxe-column field="preSale" show-overflow="title" align="center" title="是否预售"></vxe-column>
        <vxe-column field="remark" show-overflow="title" align="center" title="备注"></vxe-column>
      </vxe-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
    </div>
  </template>
  
  <script>
    import { getProductItems } from "@/api/mes/sales/print";
    export default {
      name: 'Goods',
      props: {
        readonly: {
          type: Boolean,
          default: false
        },
        cellId: {
          type: String,
          default: ''
        },
      },
      computed: {
      },
      watch: {
        cellId: {
          handler( val) {
            if (val && val !== 'add') {
              this.getList();
            } else {
              this.tableData = [];
            }
          },
        }
      },
      data() {
        return {
          tableData: [],
          total: 0,
          queryParams: {
            pageNum: 1,
            pageSize: 10,
          },
          rowConfig: {
            keyField: '',
            isHover: true,
            isCurrent: true,
          },
          columnConfig: {
            resizable: true,
            align: 'center',
            headerAlign: 'center',
          },
     
        }
      },
      methods: {
        getList() {
          getProductItems(this.cellId).then(response => {
            if(response.code === 200) {
              this.tableData = response.data?.volist;
              this.total = response.total;
            }
          });
        },
      }
  }
</script>

<style lang="scss" scoped>
.product-code-selectable {
  user-select: none;
  transition: color 0.2s;
}
.product-code-selectable:hover {
  color: #66b1ff;
  text-decoration: underline;
}
</style>
  
  <style lang="scss" scoped>
  .baseInfo{
    &-header{
      margin-bottom: 10px;
    }
  }
  </style>